<template>
  <view class="calendar-content" v-if="showCalendar">
    <!--   <text class="example-info">日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。</text> -->
    <uni-section style="display: none;" title="选择时间" type="line"></uni-section>
    <navigator class="swiper-item" url="">
      <image src="https://dfs.zuchecdn.com/visit/carmktplat/g/V3/503a5cf259844b019097de8e3961f0b6.jpg"></image>
    </navigator>
    <!-- style="padding-top: 78px; " -->
    <view>
      <!-- 插入模式 -->
      <uni-calendar class=" uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
        @monthSwitch="monthSwitch" />
    </view>
    <!-- <uni-section class="hideOnPc" title="弹出模式" type="line"></uni-section> -->
    <view class="example-body hideOnPc">
      <button class="calendar-button" type="button" @click="open">确定{{isRetOrRent}}时间</button>
    </view>
    <uni-calendar style="display: none;" ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
      :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range"
      @confirm="confirm" @close="close" />
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  /**
   * 获取任意时间
   */
  function getDate(date, AddDayCount = 0) {
    if (!date) {
      date = new Date()
    }
    if (typeof date !== 'object') {
      date = date.replace(/-/g, '/')
    }
    const dd = new Date(date)

    dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

    const y = dd.getFullYear()
    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
    return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
    }
  }
  export default {

    components: {},
    data() {
      return {
        option: {},
        showCalendar: false,
        chooseTime: '',
        isRetOrRent: '还车', //默认是还车
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        }
      }
    },
    onReady() {
      this.$nextTick(() => {
        this.showCalendar = true
      })
      // TODO 模拟请求异步同步数据
      // setTimeout(() => {
      this.info.date = getDate(new Date(), 0).fullDate
      this.returnTime = this.info.date
      this.info.startDate = getDate(new Date(), -60).fullDate
      this.info.endDate = getDate(new Date(), 30).fullDate
    },
    methods: {
      open() {
        // console.log(this.info.selected.date)
        uni.switchTab({
          // 跳转到tabBar页面不能带参数?date=
          url: '/pages/home/home'
        })
        console.log(this.returnTime)
      },
      close() {
        console.log('弹窗关闭')
      },

      confirm(e) {
        console.log('confirm 返回:', e)
      },
      monthSwitch(e) {
        console.log('monthSwitchs 返回:', e)
      },
      change(e) {
        this.chooseTime = e.fulldate
        this.chooseTime = this.chooseTime.slice(5, 7) + '月' + this.chooseTime.slice(8) + '日'
        console.log(this.chooseTime)
        // console.log(this.option.time)
        if (this.option.time === 'reTime') {

          store.commit('updateReturnTime', this.chooseTime)
        } else {
          store.commit('updateRentTime', this.chooseTime)
        }
      }

    },
    computed: {},
    onLoad(option) {
      // console.log(option.time)
      this.option = option
      if (this.option.time === 'reTime') {
        this.isRetOrRent = '还车'
      } else {
        this.isRetOrRent = '租车'
      }
    }
  }
</script>

<style lang="scss">
  .example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .calendar-button {
    flex: 1;
    font-weight: bold;
    font-size: 32rpx;
  }

  .swiper-item {
    width: 100%;
    height: 121px;

    image {
      height: 100%;
    }
  }
</style>